<!-- 补库订单详情抽屉 -->
<template>
    <div class="warehouse-details">
        <el-drawer v-model="dialogVisible" title="出库订单详情" size="1200px" direction="rtl">
            <div class="drawer-content">
                <div class="tab-header">
                    <div class="warehouse-info">
                        <el-row :gutter="28">
                            <el-col :span="4">
                                <div class="info-field">
                                    <div class="field-label">出库金额</div>
                                    <div class="field-value">{{ props.dialogRow.total_amount || '--' }}</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info-field">
                                    <div class="field-label">下单日期</div>
                                    <div class="field-value">{{ props.dialogRow.created_at || '--' }}</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info-field">
                                    <div class="field-label">交货日期</div>
                                    <div class="field-value">{{ props.dialogRow.delivery_date || '--' }}</div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info-field">
                                    <div class="field-label">客户</div>
                                    <div class="field-value">{{ props.dialogRow.customer_name || '--' }}</div>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="info-field">
                                    <div class="field-label">联系电话</div>
                                    <div class="field-value">{{ props.dialogRow.customer_phone ||
                                        props.dialogRow.org_member_phone || '--' }}</div>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="info-field">
                                    <div class="field-label">地区</div>
                                    <div class="field-value">{{ getFullAddress() }}</div>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="info-field">
                                    <div class="field-label">状态</div>
                                    <div class="field-value">{{ props.dialogRow.status_text || '--' }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div class="tab-container">
                    <el-tabs v-model="activeTab">
                        <!-- 基础信息 -->
                        <el-tab-pane label="基础信息" name="basic">
                            <div class="info-section">
                                <div class="section-title">
                                    <el-icon>
                                        <ArrowDown />
                                    </el-icon>
                                    <span>基础信息</span>
                                </div>
                                <div class="info-grid">
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">出库单号</span>
                                            <span class="value">{{ props.dialogRow.order_no || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">出库金额</span>
                                            <span class="value">{{ props.dialogRow.total_amount ? '¥' +
                                                parseFloat(props.dialogRow.total_amount).toFixed(2) : '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">下单日期</span>
                                            <span class="value">{{ props.dialogRow.order_date ||
                                                props.dialogRow.created_at || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">交货日期</span>
                                            <span class="value">{{ props.dialogRow.delivery_date || '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">客户</span>
                                            <span class="value">{{ props.dialogRow.customer_name || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">联系电话</span>
                                            <span class="value">{{ props.dialogRow.customer_phone ||
                                                props.dialogRow.org_member_phone || '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">地区</span>
                                            <span class="value">{{ getFullAddress() }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">详细地址</span>
                                            <span class="value">{{ props.dialogRow.address || '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">出库负责人</span>
                                            <span class="value">{{ props.dialogRow.contact_name ||
                                                props.dialogRow.org_member_name || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">负责人电话</span>
                                            <span class="value">{{ props.dialogRow.contact_phone ||
                                                props.dialogRow.org_member_phone || '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">状态</span>
                                            <span class="value">{{ props.dialogRow.status_text || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">备注</span>
                                            <span class="value">{{ props.dialogRow.note || '--' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="info-section">
                                <div class="section-title">
                                    <el-icon>
                                        <ArrowDown />
                                    </el-icon>
                                    <span>系统信息</span>
                                </div>
                                <div class="info-grid">
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">创建人：</span>
                                            <span class="value">{{ props.dialogRow.creator_name || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">创建时间：</span>
                                            <span class="value">{{ props.dialogRow.created_at || '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">修改人：</span>
                                            <span class="value">{{ props.dialogRow.updater_name ||
                                                props.dialogRow.audit_admin_id || '--' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">修改时间：</span>
                                            <span class="value">{{ props.dialogRow.updated_at ||
                                                props.dialogRow.audited_at || '--' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>

                        <!-- 出库产品 -->
                        <el-tab-pane label="出库产品" name="inventory">
                            <div class="inventory-content" style="height: 690px;">
                                <div class="inventory-layout">
                                    <div class="product-content">
                                        <!-- 搜索框 -->
                                        <!-- <div class="search-bar">
                                            <el-input v-model="searchKeyword" placeholder="产品名称/规格型号"
                                                style="width: 250px">
                                                <template #prefix>
                                                    <el-icon>
                                                        <Search />
                                                    </el-icon>
                                                </template>
</el-input>
</div> -->

                                        <div class="inbound-list">
                                            <el-table :data="paginatedProductList" border style="width: 100%;">
                                                <el-table-column label="产品名称" prop="name" width="auto">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.name }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="规格型号" prop="specification" width="auto">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.specification }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="拆零单位" prop="open_unit_name" width="auto">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.open_unit_name }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="出库数量" prop="num" width="auto" align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.num }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="拆零单位数量" prop="open_unit_num" width="auto"
                                                    align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.open_unit_num }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="拆零单位" prop="spu_measure_unit_name" width="auto"
                                                    align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.spu_measure_unit_name }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="SPU单位" prop="spu_unit_name" width="auto"
                                                    align="center">
                                                    <template #default="scope">
                                                        <span>{{ scope.row.spu_unit_name }}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>

                                            <!-- 表格底部合计 -->
                                            <div class="table-footer">
                                                <div class="summary-item">产品种类：<span>{{ productList.length }}</span>
                                                </div>
                                                <div class="summary-item">产品总数（个）：<span>{{ getTotalQuantity() }}</span>
                                                </div>

                                            </div>
                                        </div>
                                        <!-- 分页 -->
                                        <div class="pagination">
                                            <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                                :page-sizes="[10, 20, 50, 100]" :total="total"
                                                layout="total, sizes, prev, pager, next, jumper" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>

                        <!-- 出库情况 -->
                        <el-tab-pane label="出库情况" name="inbound">
                            <div class="inbound-content">
                                <div class="search-bar" style="justify-content: flex-start;">
                                    <el-input v-model="inboundSearch" placeholder="产品名称/规格型号/出库单号" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>

                                    <el-select v-model="outboundStatus" placeholder="请选择出库状态"
                                        style="width: 150px;margin-left: 10px;">
                                        <el-option label="全部" value="all" />
                                        <el-option label="待出库" value="1" />
                                        <el-option label="部分出库" value="2" />
                                        <el-option label="已出库" value="3" />
                                    </el-select>
                                </div>

                                <div class="inbound-list">
                                    <el-table :data="inboundList" border style="width: 100%" v-loading="false">
                                        <el-table-column label="产品名称" prop="product_name" width="auto" />
                                        <el-table-column label="规格型号" prop="specification" width="150" />
                                        <el-table-column label="拆零单位" prop="open_unit_name" width="auto" />
                                        <el-table-column label="出库状态" prop="status" width="auto">
                                            <template #default="scope">
                                                <el-tag :type="getOutboundStatusType(scope.row.status)" size="small">
                                                    {{ scope.row.status_text }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="出库数量" prop="num" width="auto" align="center">
                                            <template #default="scope">
                                                <span style="color: #E6A23C; font-weight: 600;">{{ scope.row.num
                                                    }}</span>
                                            </template>
                                        </el-table-column>
                                        <!-- <el-table-column label="已出库数量" prop="out_num" width="auto" align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A; font-weight: 600;">{{ scope.row.out_num }}</span>
                                            </template>
                                        </el-table-column> -->
                                        <el-table-column label="待出库数量" prop="wait_num" width="auto" align="center">
                                            <template #default="scope">
                                                <span style="color: #F56C6C; font-weight: 600;">{{ scope.row.wait_num
                                                    }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-tab-pane>

                        <!-- 出库退货记录 -->
                        <el-tab-pane label="出库退货记录" name="outbound">
                            <div class="outbound-content">
                                <div class="search-bar" style="justify-content: flex-start;">
                                    <el-input v-model="outboundSearch" placeholder="退货单号/负责人" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>
                                <!-- 出库退货记录列表 -->
                                <div class="outbound-list inbound-list">
                                    <el-table :data="outboundList" border style="width: 100%"
                                        v-loading="outboundLoading">
                                        <el-table-column label="退货单号" prop="return_order_no" width="140">
                                            <template #default="scope">
                                                <el-button link type="primary"
                                                    @click="handleOutboundDetails(scope.row)">{{
                                                        scope.row.return_order_no }}
                                                </el-button>
                                            </template>
                                        </el-table-column>

                                        <el-table-column label="退货日期" prop="return_date" width="auto" />
                                        <el-table-column label="状态" prop="status_text" width="auto">
                                            <template #default="scope">
                                                <el-tag :type="getReturnStatusType(scope.row.status)" size="small">
                                                    {{ scope.row.status_text }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="退货负责人" prop="manager_name" width="auto" />
                                        <el-table-column label="负责人电话" prop="manager_phone" width="auto" />
                                        <el-table-column label="客户" prop="customer_name" width="auto" />
                                        <el-table-column label="创建人" prop="creator_name" width="auto" />
                                        <el-table-column label="创建时间" prop="created_at" width="auto" />
                                    </el-table>
                                </div>
                                <div class="pagination">
                                    <Pagination v-model:current-page="outboundPage" v-model:page-size="outboundPageSize"
                                        :page-sizes="[10, 20, 50, 100]" :total="outboundTotal"
                                        layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane>

                        <!-- 操作记录 -->
                        <el-tab-pane label="操作记录" name="operation-record">
                            <div class="stock-check-content">
                                <!-- <div class="search-bar">
                                    <el-input v-model="operationSearch" placeholder="操作人/操作描述" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div> -->
                                
                                <div class="stock-check-list inbound-list">
                                    <el-table :data="paginatedOperationList" border style="width: 100%" v-loading="operationLoading">
                                        <el-table-column label="操作类型" prop="operator_type" width="120" align="center">
                                            <template #default="scope">
                                                <el-tag :type="getOperationTagType(scope.row.operator_type)" size="small">
                                                    {{ getOperationTypeText(scope.row.operator_type) }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作人" prop="operator_name" width="120" align="center" />
                                        <el-table-column label="操作时间" prop="created_at" width="180" align="center" />
                                        <el-table-column label="操作描述" prop="describe" min-width="200" show-overflow-tooltip />
                                    </el-table>
                                </div>
                                
                                <!-- <div class="pagination">
                                    <Pagination v-model:current-page="operationCurrentPage" v-model:page-size="operationPageSize"
                                        :page-sizes="[10, 20, 50, 100]" :total="operationTotal"
                                        layout="total, sizes, prev, pager, next, jumper" />
                                </div> -->
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-drawer>
        <RecordOutboundReturns ref="recordOutboundReturnsRef" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ArrowDown, Search } from '@element-plus/icons-vue';
import Pagination from "@/components/Pagination.vue";
import RecordOutboundReturns from './RecordOutboundReturns.vue';//出库退货记录详情
import api from '@/api';
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    dialogRow: {
        type: Object,
        default: () => ({})
    }
});

const emit = defineEmits(['update:dialogVisible']);

const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => emit('update:dialogVisible', val)
});

const recordOutboundReturnsRef = ref<any>(null);
const activeTab = ref('basic');

// 搜索关键字
const searchKeyword = ref('');
// 出库状态
const outboundStatus = ref('all');
// 当前页
const currentPage = ref(1);
// 每页条数
const pageSize = ref(10);
// 总条数
const total = ref(0);

// 入库搜索关键字
const inboundSearch = ref('');
// 入库当前页
const inboundPage = ref(1);
// 入库每页条数
const inboundPageSize = ref(10);
// 入库总条数
const inboundTotal = ref(0);

// 出库搜索关键字
const outboundSearch = ref('');
// 出库当前页
const outboundPage = ref(1);
// 出库每页条数
const outboundPageSize = ref(10);
// 出库总条数
const outboundTotal = ref(0);

// 操作记录分页
const stockCheckPage = ref(1);
const stockCheckPageSize = ref(10);
const stockCheckTotal = ref(0);

// 操作记录相关变量
const operationSearch = ref('');
const operationCurrentPage = ref(1);
const operationPageSize = ref(10);
const operationTotal = ref(0);
const operationLoading = ref(false);

// 定义产品接口
interface ProductItem {
    id: any;
    name: string;
    specification: string;
    open_unit_name: string;
    num: string;
    open_unit_num: string;
    spu_measure_unit_name: string;
    unit_num: string;
    spu_unit_name: string;
    spu_unit_num: string;
    stock: string;
    spu_name: string;
    spu_unit_id: any;
}

// 出库产品数据 - 从API数据中提取
const productList = computed((): ProductItem[] => {
    if (!props.dialogRow.spu_data || !Array.isArray(props.dialogRow.spu_data)) {
        return [];
    }

    const products: ProductItem[] = [];
    props.dialogRow.spu_data.forEach(spu => {
        if (spu.product_data && Array.isArray(spu.product_data)) {
            spu.product_data.forEach(product => {
                products.push({
                    id: product.id,
                    name: product.name || '--',
                    specification: product.specification || '--',
                    open_unit_name: product.open_unit_name || '--',
                    num: product.num || '0',
                    open_unit_num: product.open_unit_num || '0',
                    spu_measure_unit_name: product.spu_measure_unit_name || '--',
                    unit_num: product.unit_num || '0',
                    spu_unit_name: product.spu_unit_name || '--',
                    spu_unit_num: product.spu_unit_num || '0',
                    stock: product.stock || '0',
                    // SPU信息
                    spu_name: spu.name || '--',
                    spu_unit_id: spu.unit_id
                });
            });
        }
    });

    return products;
});

// 计算分页后的产品列表
const paginatedProductList = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return productList.value.slice(start, end);
});

// 定义出库情况数据接口
interface OutboundSituationItem {
    product_name: string;
    specification: string;
    open_unit_name: string;
    num: string;
    out_num: string;
    wait_num: string;
    status: number;
    status_text: string;
}

// 出库情况数据
const inboundList = ref<OutboundSituationItem[]>([]);

// 获取出库情况数据
const getInboundList = async () => {
    try {
        const params: any = {
            id: props.dialogRow.id
        };

        // 添加搜索关键字
        if (inboundSearch.value.trim()) {
            params.keywords = inboundSearch.value.trim();
        }

        // 添加状态筛选
        if (outboundStatus.value !== 'all') {
            params.status = outboundStatus.value;
        }

        const res = await api.Outbound.getoutboundSituationList(params);

        if (res.code === 200) {
            // 处理数据映射
            inboundList.value = res.data.map((item: any) => ({
                product_name: item.product_name || '--',
                specification: item.specification || '--',
                open_unit_name: item.open_unit_name || '--',
                num: item.num || '0',
                out_num: item.out_num || '0',
                wait_num: item.wait_num || '0',
                status: item.status || 1,
                status_text: getOutboundStatusText(item.status)
            }));
        }
    } catch (error) {
        console.error('获取出库情况失败:', error);
        inboundList.value = [];
    }
};

// 获取出库状态文本
const getOutboundStatusText = (status: number) => {
    switch (status) {
        case 1:
            return '待出库';
        case 2:
            return '部分出库';
        case 3:
            return '已出库';
        default:
            return '未知状态';
    }
};

// 获取出库状态标签类型
const getOutboundStatusType = (status: number) => {
    switch (status) {
        case 1:
            return 'warning';  // 待出库 - 橙色
        case 2:
            return 'primary';  // 部分出库 - 蓝色
        case 3:
            return 'success';  // 已出库 - 绿色
        default:
            return 'info';
    }
};

// 监听搜索和状态变化
watch([inboundSearch, outboundStatus], () => {
    if (props.dialogVisible) {
        getInboundList();
    }
}, {
    deep: true
});

// 监听出库搜索变化
watch(outboundSearch, () => {
    if (props.dialogVisible) {
        // 防抖处理
        setTimeout(() => {
            getOutboundList();
        }, 300);
    }
});

// 监听dialogVisible变化，获取出库情况数据
watch(() => props.dialogVisible, async (val) => {
    if (val) {
        await getInboundList();
        await getOutboundList(); // 添加获取出库退货记录数据
    }
});

// 出库退货记录数据
const outboundList = ref([]);
const outboundLoading = ref(false);

// 获取出库退货记录数据
const getOutboundList = async () => {
    if (!props.dialogRow.id) {
        console.warn('出库订单ID不存在，无法获取退货记录');
        return;
    }

    outboundLoading.value = true;
    try {
        const params: any = {
            outbound_order_id: props.dialogRow.id
        };

        // 添加搜索关键字
        if (outboundSearch.value.trim()) {
            params.keywords = outboundSearch.value.trim();
        }

        const res = await api.Outbound.getoutboundReturnList(params);

        if (res.code === 200) {
            outboundList.value = res.data.data;
            outboundTotal.value = res.data.pager?.total_records || 0;
            console.log('获取出库退货记录成功:', outboundList.value);
        } else {
            console.error('获取出库退货记录失败:', res.message);
            outboundList.value = [];
            outboundTotal.value = 0;
        }
    } catch (error) {
        console.error('获取出库退货记录失败:', error);
        outboundList.value = [];
        outboundTotal.value = 0;
    } finally {
        outboundLoading.value = false;
    }
};


// 获取退货状态标签类型
const getReturnStatusType = (status: number) => {
    const statusTypeMap: { [key: number]: string } = {
        0: 'info',     // 待提交
        1: 'warning',  // 审核中
        2: 'success',  // 审核完成
        3: 'danger'    // 审核拒绝
    };
    return statusTypeMap[status] || 'info';
};

// 打开退货单详情
const handleOutboundDetails = (item: any) => {
    console.log('查看退货单详情:', item);
    // 这里可以跳转到退货单详情页面或打开详情弹窗
    // 由于当前组件已经是详情抽屉，建议在新页面打开或在父组件中处理
    recordOutboundReturnsRef.value?.openLoading(item);
};

// 获取完整地址信息
const getFullAddress = () => {
    const { province, city, area } = props.dialogRow;
    if (province && city && area) {
        return `${province} ${city} ${area}`;
    } else if (province && city) {
        return `${province} ${city}`;
    } else if (province) {
        return `${province}`;
    }
    return '--';
};

// 计算产品总数量
const getTotalQuantity = () => {
    return productList.value.reduce((total, item) => {
        return total + (parseFloat(item.num) || 0);
    }, 0).toFixed(2);
};


// 监听dialogRow变化，更新产品列表
watch(() => props.dialogRow, (newVal) => {
    if (newVal && newVal.spu_data) {
        console.log('出库订单产品数据:', newVal.spu_data);
        // 更新分页总数
        total.value = productList.value.length;
        // 重置到第一页
        currentPage.value = 1;
    }
}, { deep: true, immediate: true });

// 监听分页变化
watch([currentPage, pageSize], () => {
    console.log(`当前页: ${currentPage.value}, 每页条数: ${pageSize.value}`);
});

// 操作记录数据
const stockCheckList = ref([]);

// 获取操作记录数据
const getStockCheckList = async () => {
    operationLoading.value = true;
    try {
        const params: any = {
            id: props.dialogRow.id,
        };

        // 添加搜索关键字
        if (operationSearch.value.trim()) {
            params.keywords = operationSearch.value.trim();
        }

        const res = await api.Outbound.getoutboundOrderOperationLog(params);

        if (res.code === 200) {
            // 处理数据结构，可能是 res.data.data 或者直接 res.data
            if (res.data.data) {
                stockCheckList.value = res.data.data || [];
            
            } 
            console.log('获取操作记录成功:', stockCheckList.value);
            console.log('分页信息:', res.data.pager || res.pager);
        } else {
            console.error('获取操作记录失败:', res.message);
            stockCheckList.value = [];
            operationTotal.value = 0;
        }
    } catch (error) {
        console.error('获取操作记录失败:', error);
        stockCheckList.value = [];
        operationTotal.value = 0;
    } finally {
        operationLoading.value = false;
    }
};

// 获取操作类型文本
const getOperationTypeText = (type: string) => {
    const typeMap: { [key: string]: string } = {
        'add': '新增',
        'edit': '编辑',
        'delete': '删除',
        'submit': '提交',
        'audit': '审核',
        'approve': '审批',
        'reject': '拒绝',
        'cancel': '取消'
    };
    return typeMap[type] || type || '未知操作';
};

// 获取操作类型标签颜色
const getOperationTagType = (type: string) => {
    const tagMap: { [key: string]: string } = {
        'add': 'success',
        'edit': 'warning', 
        'delete': 'danger',
        'submit': 'primary',
        'audit': 'info',
        'approve': 'success',
        'reject': 'danger',
        'cancel': 'info'
    };
    return tagMap[type] || 'info';
};

// 过滤后的操作记录列表
const filteredOperationList = computed(() => {
    if (!operationSearch.value.trim()) {
        return stockCheckList.value;
    }
    
    const keyword = operationSearch.value.toLowerCase();
    return stockCheckList.value.filter((item: any) => {
        return (
            (item.operator_name && item.operator_name.toLowerCase().includes(keyword)) ||
            (item.describe && item.describe.toLowerCase().includes(keyword)) ||
            (item.operator_type && getOperationTypeText(item.operator_type).toLowerCase().includes(keyword))
        );
    });
});

// 分页后的操作记录列表
const paginatedOperationList = computed(() => {
    const start = (operationCurrentPage.value - 1) * operationPageSize.value;
    const end = start + operationPageSize.value;
    operationTotal.value = filteredOperationList.value.length;
    return filteredOperationList.value.slice(start, end);
});

// 监听操作记录搜索变化
watch(operationSearch, () => {
    operationCurrentPage.value = 1; // 搜索时重置到第一页
});

// 监听操作记录分页变化
watch([operationCurrentPage, operationPageSize], () => {
    console.log(`操作记录当前页: ${operationCurrentPage.value}, 每页条数: ${operationPageSize.value}`);
});

// 监听dialogVisible变化，获取操作记录数据
watch(() => props.dialogVisible, async (val) => {
    if (val && props.dialogRow.id) {
        await getStockCheckList();
    }
});

// 监听dialogRow变化，获取操作记录数据
watch(() => props.dialogRow.id, (newId) => {
    if (newId && props.dialogVisible) {
        getStockCheckList();
    }
});
</script>

<style lang="scss" scoped>
.warehouse-details {
    .drawer-content {
        height: calc(100% - 60px);
        overflow-y: auto;

        .tab-header {
            padding: 10px;
            background-color: #F5F7FA;

            .warehouse-info {
                .info-field {
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    border-radius: 4px;

                    .field-label {
                        color: #909399;
                        font-size: 13px;
                        margin-bottom: 4px;
                    }

                    .field-value {
                        color: #333;
                        font-weight: 500;
                        font-size: 14px;
                    }
                }
            }
        }

        .tab-container {
            padding: 20px;

            :deep(.el-tabs__header) {
                margin-bottom: 20px;
            }
        }

        .info-section {
            margin-bottom: 24px;

            .section-title {
                background-color: #F5F7FA;
                padding: 12px 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                font-size: 14px;
                font-weight: bold;
                color: #333;

                .el-icon {
                    font-size: 16px;
                    color: #626aef;
                }
            }

            .info-grid {
                padding: 16px;
                border-radius: 4px;

                .info-row {
                    display: flex;
                    margin-bottom: 16px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .info-col {
                        flex: 1;
                        display: flex;
                        align-items: center;

                        .label {
                            width: 80px;
                            color: #000;
                            flex-shrink: 0;
                            margin-left: 8px;
                            font-size: 12px;
                        }

                        .value {
                            color: #333;
                            flex: 1;
                            display: inline-block;
                            padding: 6px;
                            font-size: 14px;
                            background-color: #F5F7FA;
                        }
                    }
                }
            }
        }
    }
}

:deep(.el-drawer) {
    .el-drawer__body {
        padding: 0;
    }
}

:deep(.el-tabs__nav-wrap::after) {
    height: 1px;
}

:deep(.el-tabs__active-bar) {
    background-color: #626aef;
}

:deep(.el-tabs__item.is-active) {
    color: #626aef;
}

:deep(.el-tabs__item:hover) {
    color: #626aef;
}

.search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.inbound-list,
.outbound-list {
    margin-bottom: 16px;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    color: #333;

    .summary-item {
        font-weight: 500;

        span {
            color: #626aef;
            font-weight: bold;
        }
    }
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
}

:deep(.el-table) {
    --el-table-header-bg-color: #F5F7FA;

    th {
        background-color: var(--el-table-header-bg-color);
        color: #606266;
        font-weight: 500;
    }
}

.inventory-layout {
    display: flex;
    height: 100%;

    .product-content {
        flex: 1;

        .search-bar {
            margin-bottom: 16px;
        }
    }
}

// 金额样式
.amount-text {
    color: #E6A23C;
    font-weight: 600;
}

// 产品表格优化
:deep(.el-table) {
    .el-table__body {
        tr:hover>td {
            background-color: #f5f7fa !important;
        }
    }
}
</style>
